<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>关于我们 - 【少儿编程教学平台】</title>
    <link rel="icon" href="/img/logo.png">
    <link rel="stylesheet" type="text/css" href="/css/sAbout.css">
    <script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>

</head>
<body>

<div class="headerpage"></div>

<div class="about">
    <div class="about-center">
        <div class="about-left">
            <div class="about-head">
                <h1>关于我们</h1>
            </div>
            <div class="about-text">
                <b>喵喵少儿编程平台，</b>为中国青少儿编程教育布道！面向1.5亿中小学生和家长，提供世界前沿的少儿编程教学文章和少儿编程课程，推动中国少儿编程教育的发展！
            </div>
            <div class="about-img"></div>
            <div class="statement">
                <h1>版权声明</h1>
            </div>
            <div class="statement-text1">
                喵喵少儿编程平台的原创文章禁止在未经转载许可的情况下，以任何形式转载或发表至其他平台，如需申请转载，请发送邮件至1203989715@qq.com申请。获得转载许可后，在转载发表时必须注明出处为“喵喵少儿编程平台”、以及该文章原地址。
            </div>
            <div class="statement-text2">我方已采用“版权印”对全网进行侵权监控，如发现有未经许可的抄袭和转载行为，我方将交由法务部通过法律途径维权。</div>
            <div class="about-contact">
                <h1>联系我们</h1>
            </div>
            <div class="contact-img"></div>
        </div>
        <div class="about-right">
            <div class="wei">微信公众号</div>
            <div class="wei-code"></div>
        </div>
        <div class="right-text">
            <div class="special">精品专题</div>
            <div class="special-img1"></div>
            <div class="special-img2"></div>
            <div class="special-img3"></div>
            <div class="mask" style="top:-500px;"></div>
            <div class="mask" style="top:-485px;"></div>
            <div class="mask" style="top:-470px;"></div>
            <div class="special-look special-position1" onclick="window.location.href='sArticle'">
                <span class="see">关于少儿编程教育家长必读</span>
                <div class="look">查看专题</div>
            </div>
            <div class="special-look special-position2" onclick="window.location.href='sArticle'">
                <span class="see">人工智能时代下的少儿教育</span>
                <div class="look">查看专题</div>
            </div>
            <div class="special-look special-position3" onclick="window.location.href='sArticle'">
                <span class="see">国内外那些逆天的编程少年</span>
                <div class="look">查看专题</div>
            </div>

        </div>
        <div class="about-right">
            <div class="wei">微信公众号</div>
            <div class="wei-code"></div>
        </div>
    </div>
</div>

<div class="footerpage"></div>

<script type="text/javascript">
    $(function () {
        $(".headerpage").load("header.jsp");
        $(".footerpage").load("footer.jsp");


        $(".special-look").mouseover(function () {

            $(this).children(".look").css("border", " 1px solid #fff").css("background-color", "white").css("color", "black");

        })

        $(".special-look").mouseout(function () {

            $(this).children(".look").css("border", " 1px solid #fff").css("background-color", "transparent").css("color", "#fff");


        })

        var bigs = document.getElementsByClassName("special-look");

        var mask = document.getElementsByClassName("mask");

        for (var i = 0; i < bigs.length; i++) {

            (function (e) {

                bigs[e].onmouseover = function () {
                    mask[e].style.opacity = "0.5";
                }

                bigs[e].onmouseout = function () {
                    mask[e].style.opacity = "0.7";
                }

            })(i)

        }


    })

</script>


</body>
</html>